<template>
  <el-dialog
    :visible="visible"
    width="450px"
    custom-class="bargain-wrapper"
    :before-close="handleClose"
  >
    <div slot="title" class="bargain-header">砍价详情</div>
    <el-scrollbar class="bargain-scroll">
      <div class="bargain-body" v-if="!$util.isEmpty(bargainData)">
        <!-- 发起砍价的用户是否是本人 -->
        <template v-if="userInfo.id === bargainData.sponsor_user_id">
          <div class="prompt" v-if="seconds === 0">活动已结束</div>
          <template v-else>
            <div class="prompt" v-if="bargainData.bargain_finished == 1">
              恭喜您，砍价成功
            </div>
            <div class="prompt" v-else>
              已邀请名<span class="yellow">{{ bargainData.bargained_nums }}</span>
              好友，再邀请
              <span class="yellow">{{ bargainData.remain_nums }}</span>
              名即可砍价成功
            </div>
          </template>
        </template>
        <template v-else>
          <template v-if="seconds > 0 && bargainData.bargain_finished === 0">
            <div class="prompt" v-if="bargainData.current_bargain_count === 1">
              谢谢您，成功砍价<span class="yellow">{{
                bargainData.current_bargain_price | formatMoney
              }}</span>
            </div>
            <div class="prompt" v-else>帮我砍一刀吧～</div>
          </template>
          <div class="prompt" v-else>砍价已结束~</div>
        </template>

        <template v-if="userInfo.id === bargainData.sponsor_user_id">
          <CountDown
            v-if="seconds > 0"
            :timestamp="bargainData.end_countdown"
            @change="handleCountDownChange"
          ></CountDown>
        </template>
        <div v-else>
          <CountDown
            v-if="seconds > 0 && bargainData.bargain_finished == 0"
            :timestamp="bargainData.end_countdown"
            @change="handleCountDownChange"
          ></CountDown>
        </div>

        <div class="progress">
          <el-image
            class="progress-symbol"
            :src="require('@/assets/images/promotion/kanjia_details_coin.png')"
          ></el-image>
          <div class="progress-inner" :style="[progressWidth]"></div>
          <div class="progress-innerText" :style="[progressLeft]">
            已砍{{ bargainData.bargained_total_price | formatMoney }}
          </div>
        </div>

        <template v-if="seconds > 0">
          <template v-if="userInfo.id === bargainData.sponsor_user_id">
            <div class="btn" v-if="bargainData.bargain_finished === 1" @click="handlePay">
              去支付
            </div>
            <div class="btn" v-else @click="handleInviteFriend">
              邀请好友砍价
            </div>
          </template>
          <template v-else>
            <div class="btn" @click="handleWant" v-if="bargainData.bargain_finished === 1">
              我也想要
            </div>
            <template v-else>
              <div class="btn" v-if="bargainData.current_bargain_count === 1" @click="handleWant">
                我也想要
              </div>
              <div class="btn" v-else @click="handleHelp">
                帮TA砍一刀
              </div>
            </template>
          </template>
        </template>

        <div class="ranking">
          <el-image
            class="title"
            :src="require('@/assets/images/promotion/kanjia_list.png')"
          ></el-image>
          <div class="list">
            <div class="item" v-for="(item, index) in bargainData.bargain_data" :key="index">
              <el-avatar :size="50" :src="item.current_user_avatar_url"></el-avatar>
              <div class="content">
                <div class="name">
                  {{ item.current_user_name }}
                </div>
                <div class="date">
                  {{ item.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
                </div>
              </div>
              <div class="price">砍掉{{ item.current_bargain_price | formatMoney('元') }}</div>
            </div>
          </div>
          <div class="empty" v-if="$util.isEmpty(bargainData.bargain_data)">
            暂无好友参与砍价～
          </div>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
import CountDown from './countdown'
import { mapState } from 'vuex'
export default {
  components: {
    CountDown
  },
  data() {
    return {
      seconds: 1
    }
  },
  computed: {
    ...mapState({
      visible: state => state.promotion.bargainVisible,
      bargainData: state => state.promotion.bargainData,
      userInfo: state => state.user.info,
      shareCode: state => state.projectSetting.globShareCode
    }),
    progressWidth() {
      let style = {}
      let num = Math.floor(
        (this.bargainData.bargained_total_price / this.bargainData.bargain_price) * 100
      )
      let percent = num > 100 ? 100 : num < 0 ? 0 : num
      style.width = `${percent}%`
      return style
    },
    progressLeft() {
      let style = {}
      let num = Math.floor(
        (this.bargainData.bargained_total_price / this.bargainData.bargain_price) * 100
      )
      let percent = num > 100 ? 100 : num < 0 ? 0 : num
      style.left = `calc(${percent}% - 38px)`
      return style
    }
  },
  methods: {
    // 关闭
    handleClose() {
      this.$store.commit('promotion/SET_BARGAIN_VISIBLE', false)
    },
    // 邀请好友砍价
    handleInviteFriend() {
      let _this = this
      _this.handleClose()
      let query = {
        type: 12,
        id: _this.$route.params.id,
        promotion: _this.bargainData.id
      }
      _this.$api.getShareInfo(query, res => {
        _this.$store.commit('promotion/SET_SHARE_DATA', {
          data: res.data,
          type: 12
        })
        _this.$store.commit('promotion/SET_SHARE_VISIBLE', true)
      })
    },
    // 帮好友砍价
    handleHelp() {
      let _this = this
      _this.$api.postPromotionBargainDoit(
        {
          promotion_id: _this.bargainData.id,
          sponsor_user_id: _this.bargainData.sponsor_user_id
        },
        res => {
          _this.getBargainData()
          _this.$message.info(res.msg)
        },
        error => {
          _this.$message.error(error.msg)
        }
      )
    },
    // 我也要砍价
    handleWant() {
      this.handleClose()
      this.$router.replace({
        path: this.$route.path
      })
    },
    // 砍价详情数据
    getBargainData() {
      let _this = this
      _this.$api.getPromotionBargainDetail(
        {
          promotion_id: _this.bargainData.id
        },
        res => {
          _this.$store.commit('promotion/SET_BARGAIN_DATA', res.data)
        }
      )
    },
    // 去支付
    handlePay() {
      let _this = this
      let query = {
        cid: _this.$route.params.id,
        pid: _this.bargainData.id
      }
      // 如果code添加code
      if (!_this.$util.isEmpty(_this.shareCode)) {
        query = {
          ...query,
          share_code: _this.shareCode
        }
      }

      query = {
        ...query,
        redirect: this.$route.path
      }

      _this.handleClose()

      _this.$router.push({
        path: '/buy/course',
        query: query
      })
    },
    handleCountDownChange(val) {
      this.seconds = val
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .bargain-wrapper .el-dialog__header {
  border-bottom: 1px solid #ebeef5;
}
::v-deep .bargain-wrapper .el-dialog__body {
  padding: 0;
}

.bargain-wrapper {
  .bargain-header {
    font-size: 15px;
    font-weight: 400;
    color: $text-color-import;
  }
  .bargain-scroll {
    width: 100%;
    height: 380px;
    ::v-deep .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .bargain-body {
    padding: 25px 20px;
    .prompt {
      font-size: 16px;
      font-weight: 500;
      color: $text-color-import;
      text-align: center;
      .yellow {
        color: #ff8a52;
      }
    }
    ::v-deep .countdown {
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      .colon {
        padding: 0 3px;
        font-size: 12px;
        font-weight: 400;
        color: #ff6b25;
      }
      .number {
        font-size: 12px;
        color: #ffffff;
        width: 20px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        background: #ff6b25;
        border-radius: 2px;
      }
    }
    .progress {
      width: 360px;
      height: 12px;
      margin: 40px auto 60px;
      border-radius: 8px;
      position: relative;
      background: #ffece3;
      border: 1px solid #ffdbca;
      .progress-symbol {
        position: absolute;
        left: -16px;
        top: -6px;
      }
      .progress-inner {
        height: 12px;
        background: linear-gradient(270deg, #ffb764 0%, #ff8a52 100%);
        border-radius: 8px;
      }
      .progress-innerText {
        padding: 3px 0;
        min-width: 76px;
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        color: #ff8a52;
        position: absolute;
        top: 20px;
        background: #fff4ee;
        border-radius: 2px;
      }
    }
    .btn {
      margin: 0 auto;
      width: 126px;
      height: 30px;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 30px;
      background: #ff8a52;
      border-radius: 4px;
      cursor: pointer;
    }
    .ranking {
      margin-top: 23px;
      padding: 15px 10px;
      background: #fff9f7;
      border-radius: 4px;
      .title {
        margin: 0 auto;
        width: 130px;
        display: block;
      }
      .list {
        margin-top: 5px;
        .item {
          display: flex;
          align-items: center;
          padding: 6px 0;
          .content {
            flex: 1;
            margin-left: 12px;
            .name {
              max-width: 250px;
              font-size: 13px;
              font-weight: 400;
              color: $text-color-import;
              @include ellipsis();
            }
            .date {
              margin-top: 5px;
              font-size: 12px;
              font-weight: 400;
              color: #909399;
            }
          }
          .price {
            font-size: 14px;
            font-weight: 400;
            color: #ff8a52;
          }
        }
      }
      .empty {
        padding: 20px 0;
        font-size: 12px;
        font-weight: 400;
        color: #ffaf89;
        text-align: center;
      }
    }
  }
}
</style>
